<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材资源管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#1e40af',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#94a3b8',
                        light: '#f8fafc',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-smooth {
                transition: all 0.3s ease;
            }
            .tree-line {
                position: relative;
            }
            .tree-line::before {
                content: '';
                position: absolute;
                left: -16px;
                top: 0;
                height: 100%;
                width: 1px;
                background-color: #d1d5db;
            }
            .tree-line::after {
                content: '';
                position: absolute;
                left: -16px;
                top: 10px;
                width: 8px;
                height: 1px;
                background-color: #d1d5db;
            }
            .nav-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .subnav-active {
                @apply bg-primary text-white;
            }
            .version-item {
                @apply p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-smooth;
            }
            .version-item-active {
                @apply bg-primary/10 font-medium;
            }
            .chapter-item {
                @apply p-2 rounded-md hover:bg-gray-100 cursor-pointer transition-smooth;
            }
            .chapter-item-active {
                @apply bg-primary/10 text-primary;
            }
            .knowledge-item {
                @apply p-2 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-smooth;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-md">
            <!-- 顶部信息栏 -->
            <div class="bg-gray-50 border-b border-gray-200 py-2">
                <div class="container mx-auto px-4 flex justify-between items-center text-sm">
                    <div class="text-gray-500">欢迎使用智慧教育题库系统管理后台</div>
                    <div class="flex items-center gap-4">
                        <a href="#" class="text-gray-500 hover:text-primary transition-smooth">帮助中心</a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-smooth">联系客服</a>
                        <div class="flex items-center gap-2">
                            <img src="https://picsum.photos/id/1001/32/32" alt="用户头像" class="w-6 h-6 rounded-full">
                            <span class="font-medium">李老师</span>
                            <i class="fa fa-angle-down text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主导航栏 -->
            <nav class="container mx-auto px-4">
                <ul class="flex">
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary transition-smooth">
                            <i class="fa fa-tachometer mr-2"></i> 控制台
                        </a>
                    </li>
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-primary border-b-2 border-primary font-medium transition-smooth">
                            <i class="fa fa-book mr-2"></i> 教材管理
                            <i class="fa fa-angle-down ml-2 text-xs"></i>
                        </a>
                        <!-- 二级导航 -->
                        <ul class="absolute left-0 top-full w-56 bg-white shadow-lg border border-gray-200 rounded-b-md z-10 hidden">
                            <li><a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">教材资源管理</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">版本对比</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">教材更新日志</a></li>
                        </ul>
                    </li>
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary transition-smooth">
                            <i class="fa fa-list-alt mr-2"></i> 题库管理
                            <i class="fa fa-angle-down ml-2 text-xs"></i>
                        </a>
                        <!-- 二级导航 -->
                        <ul class="absolute left-0 top-full w-56 bg-white shadow-lg border border-gray-200 rounded-b-md z-10 hidden">
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">试题管理</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">知识点标签</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">题库统计</a></li>
                        </ul>
                    </li>
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary transition-smooth">
                            <i class="fa fa-file-text-o mr-2"></i> 组卷系统
                            <i class="fa fa-angle-down ml-2 text-xs"></i>
                        </a>
                        <!-- 二级导航 -->
                        <ul class="absolute left-0 top-full w-56 bg-white shadow-lg border border-gray-200 rounded-b-md z-10 hidden">
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">人工组卷</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">随机组卷</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">AI组卷</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">我的试卷</a></li>
                        </ul>
                    </li>
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary transition-smooth">
                            <i class="fa fa-bar-chart mr-2"></i> 数据分析
                            <i class="fa fa-angle-down ml-2 text-xs"></i>
                        </a>
                        <!-- 二级导航 -->
                        <ul class="absolute left-0 top-full w-56 bg-white shadow-lg border border-gray-200 rounded-b-md z-10 hidden">
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">班级学情分析</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">知识点掌握度</a></li>
                            <li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-smooth">试卷分析报告</a></li>
                        </ul>
                    </li>
                    <li class="relative">
                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary transition-smooth">
                            <i class="fa fa-cog mr-2"></i> 系统设置
                        </a>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 页面导航与标题 -->
            <div class="mb-6">
                <div class="text-sm text-gray-500 mb-2">
                    <a href="#" class="hover:text-primary">首页</a> <i class="fa fa-angle-right text-xs mx-1"></i>
                    <a href="#" class="hover:text-primary">教材管理</a> <i class="fa fa-angle-right text-xs mx-1"></i>
                    <span class="text-gray-700">教材资源管理</span>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">教材资源管理</h2>
                <p class="text-gray-500 mt-1">管理教材版本、章节结构和知识点内容</p>
            </div>

            <!-- 教材资源管理主界面 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden h-[calc(100vh-220px)] flex flex-col md:flex-row">
                <!-- 左侧：教材版本列表 -->
                <div class="w-full md:w-64 border-b md:border-b-0 md:border-r border-gray-200 overflow-y-auto">
                    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                        <h3 class="font-semibold">教材版本列表</h3>
                        <button id="addVersionBtn" class="text-primary hover:text-primary/80">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                    <div class="p-2">
                        <div class="relative">
                            <input type="text" placeholder="搜索版本..." class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    <div id="versionList" class="divide-y divide-gray-100">
                        <!-- 版本列表将通过JS渲染 -->
                    </div>
                </div>

                <!-- 中间：章节结构树 -->
                <div class="w-full md:w-80 border-b md:border-b-0 md:border-r border-gray-200 overflow-y-auto">
                    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                        <h3 class="font-semibold" id="currentVersionName">选择版本查看章节</h3>
                        <div class="flex space-x-2">
                            <button id="addChapterBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-plus"></i>
                            </button>
                            <button id="editChapterBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-edit"></i>
                            </button>
                            <button id="deleteChapterBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <ul class="pl-4 space-y-1" id="chapterTree">
                            <!-- 章节树将通过JS渲染 -->
                            <li class="text-gray-500 italic">请从左侧选择教材版本</li>
                        </ul>
                    </div>
                </div>

                <!-- 右侧：章节详情和知识点列表 -->
                <div class="flex-1 overflow-y-auto">
                    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                        <h3 class="font-semibold" id="currentChapterName">选择章节查看详情</h3>
                        <div class="flex space-x-2">
                            <button id="addKnowledgeBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-plus"></i>
                            </button>
                            <button id="editKnowledgeBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-edit"></i>
                            </button>
                            <button id="deleteKnowledgeBtn" class="text-primary hover:text-primary/80" disabled>
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 章节详情 -->
                    <div id="chapterDetail" class="p-4 border-b border-gray-200 hidden">
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <span class="text-sm font-medium text-gray-500 w-24">章节名称：</span>
                                <span id="detailChapterName" class="text-gray-800"></span>
                            </div>
                            <div class="flex items-start mb-2">
                                <span class="text-sm font-medium text-gray-500 w-24">章节描述：</span>
                                <div id="detailChapterDesc" class="text-gray-800"></div>
                            </div>
                            <div class="flex items-center mb-2">
                                <span class="text-sm font-medium text-gray-500 w-24">知识点数量：</span>
                                <span id="detailKnowledgeCount" class="text-gray-800"></span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm font-medium text-gray-500 w-24">创建时间：</span>
                                <span id="detailCreateTime" class="text-gray-800"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 知识点列表 -->
                    <div id="knowledgeList" class="p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="font-medium">知识点列表</h4>
                            <div class="relative">
                                <input type="text" placeholder="搜索知识点..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                        <div id="knowledgeItems" class="space-y-1">
                            <!-- 知识点列表将通过JS渲染 -->
                            <div class="text-gray-500 italic">请从左侧选择章节</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4 mt-6">
            <div class="container mx-auto px-4 text-center text-sm text-gray-500">
                © 2025 智慧教育题库系统 - 版权所有
            </div>
        </footer>
    </div>

    <!-- 添加版本弹窗 -->
    <div id="addVersionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold">添加新版本</h3>
                <button id="closeAddVersionModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <form id="addVersionForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材名称</label>
                        <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">学科</label>
                            <select name="subject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option value="数学">数学</option>
                                <option value="语文">语文</option>
                                <option value="英语">英语</option>
                                <option value="物理">物理</option>
                                <option value="化学">化学</option>
                                <option value="生物">生物</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                            <select name="grade" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option value="高一">高一</option>
                                <option value="高二">高二</option>
                                <option value="高三">高三</option>
                                <option value="初一">初一</option>
                                <option value="初二">初二</option>
                                <option value="初三">初三</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">出版社</label>
                            <input type="text" name="publisher" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">出版日期</label>
                            <input type="date" name="publishDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材简介</label>
                        <textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                <button id="cancelAddVersionBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth mr-2">
                    取消
                </button>
                <button id="confirmAddVersionBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                    添加版本
                </button>
            </div>
        </div>
    </div>

    <!-- 添加章节弹窗 -->
    <div id="addChapterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold">添加新章节</h3>
                <button id="closeAddChapterModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <form id="addChapterForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">章节名称</label>
                        <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">章节描述</label>
                        <textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">所属版本</label>
                        <select id="chapterVersionSelect" name="versionId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <!-- 版本选项将通过JS渲染 -->
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">上级章节</label>
                        <select id="parentChapterSelect" name="parentId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="0">无（顶级章节）</option>
                            <!-- 章节选项将通过JS渲染 -->
                        </select>
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                <button id="cancelAddChapterBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth mr-2">
                    取消
                </button>
                <button id="confirmAddChapterBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                    添加章节
                </button>
            </div>
        </div>
    </div>

    <!-- 添加知识点弹窗 -->
    <div id="addKnowledgeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold">添加新知识点</h3>
                <button id="closeAddKnowledgeModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <form id="addKnowledgeForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">知识点名称</label>
                        <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">知识点描述</label>
                        <textarea name="description" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">难度级别</label>
                            <select name="level" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option value="基础">基础</option>
                                <option value="中级">中级</option>
                                <option value="高级">高级</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">所属章节</label>
                            <select id="knowledgeChapterSelect" name="chapterId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <!-- 章节选项将通过JS渲染 -->
                            </select>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">相关试题数量</label>
                        <input type="number" name="questionCount" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                <button id="cancelAddKnowledgeBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth mr-2">
                    取消
                </button>
                <button id="confirmAddKnowledgeBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                    添加知识点
                </button>
            </div>
        </div>
    </div>

    <!-- 编辑章节弹窗 -->
    <div id="editChapterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold">编辑章节</h3>
                <button id="closeEditChapterModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <form id="editChapterForm">
                    <input type="hidden" name="id">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">章节名称</label>
                        <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">章节描述</label>
                        <textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">所属版本</label>
                        <select id="editChapterVersionSelect" name="versionId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" disabled>
                            <!-- 版本选项将通过JS渲染 -->
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">上级章节</label>
                        <select id="editParentChapterSelect" name="parentId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="0">无（顶级章节）</option>
                            <!-- 章节选项将通过JS渲染 -->
                        </select>
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                <button id="cancelEditChapterBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth mr-2">
                    取消
                </button>
                <button id="confirmEditChapterBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                    保存修改
                </button>
            </div>
        </div>
    </div>

    <!-- 编辑知识点弹窗 -->
    <div id="editKnowledgeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold">编辑知识点</h3>
                <button id="closeEditKnowledgeModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <form id="editKnowledgeForm">
                    <input type="hidden" name="id">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">知识点名称</label>
                        <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">知识点描述</label>
                        <textarea name="description" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">难度级别</label>
                            <select name="level" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option value="基础">基础</option>
                                <option value="中级">中级</option>
                                <option value="高级">高级</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">所属章节</label>
                            <select id="editKnowledgeChapterSelect" name="chapterId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary" disabled>
                                <!-- 章节选项将通过JS渲染 -->
                            </select>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">相关试题数量</label>
                        <input type="number" name="questionCount" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
                <button id="cancelEditKnowledgeBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-smooth mr-2">
                    取消
                </button>
                <button id="confirmEditKnowledgeBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-smooth">
                    保存修改
                </button>
            </div>
        </div>
    </div>

    <!-- 确认删除弹窗 -->
    <div id="confirmDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        